<template>
  <div class="recharge-page">
    <h1>会员充值</h1>
    <div class="recharge-cards">
      <div class="card" v-for="option in rechargeOptions" :key="option.id" @click="selectRecharge(option)">
        <h2>{{ option.amount }}元</h2>
        <p>赠送{{ option.bonus }}积分</p>
      </div>
    </div>
    <div class="selected-option">
      <h2>已选择: {{ selectedOption.amount }}元</h2>
      <p>赠送{{ selectedOption.bonus }}积分</p>
      <button @click="confirmRecharge">确认充值</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const rechargeOptions = ref([
  { id: 1, amount: 50, bonus: 100 },
  { id: 2, amount: 100, bonus: 300 },
  { id: 3, amount: 200, bonus: 700 },
]);

const selectedOption = ref({});

const selectRecharge = (option) => {
  selectedOption.value = option;
};

const confirmRecharge = () => {
  alert(`您已选择充值${selectedOption.value.amount}元，将获得${selectedOption.value.bonus}积分。`);
};
</script>

<style scoped>
.recharge-page {
  text-align: center;
  padding: 20px;
}

.recharge-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.card {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.card:hover {
  background-color: #f0f0f0;
}

.selected-option {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}

button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}
</style>
